<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小红书-标记我的生活</title>
		<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background:#fbfbfb url(img/9e244c50-108b-41df-b649-537f318124a9.jpg) no-repeat fixed center;
		    color:black;
			background-size: cover;
			
		}
		.w{
			width: 1402px;
			margin: 0 auto;
		}
		li{
			list-style: none;
		}
		a{
			text-decoration:none;
		}
		.fl{
			float: left;
		}
		.fr{
			float: right;
		}
		.clearfix::before,.clearfix::after{
			content:'';
			display: table;
		}
		.clearfix::after{
			clear:both;
		}
		header{
			position:fixed;
			height: 106px;
			display: flex;
		    flex-direction: row;
		    justify-content: space-between;
		    align-items: center;
		    width: 100%;
		    height: 106px;
		}
		.logo{
			width: 72px;
			height: 25px;
			margin-top: 1px;
			margin-left: 91px;
		}
		.navigation{
			width: 1080px;
			margin: 0 76px;
			position: relative;
			display: inline-block;
		}
		.navigation a{
			display: block;
			color: white;
		}
		.navigation li{
			margin-left: 58px;
			font-size: 16px;
			
		}
		.navigation>li:hover{
			

		}
		.current{
			border-bottom: 3px solid white;
			border-radius: 1px
		}
		.c1{
			padding-bottom: 6px;
		}
		.arrow{
		   margin-left: 4px;
		   transform: rotate(90deg);
		   width: 6px;
		   height: 6px;
		}
		.sublook{
			padding-bottom: 30px;
		}
		.subnav a{
			display: block;
			font-size: 16px;
			line-height: 20px;
			color: black;
			text-decoration: none;
		}
		.subnav li{
			margin-left: 0;
		    margin-right: -1px;
		    display: block;
		    white-space: nowrap;
		    color: #999;
		    font-weight: 300;
		    text-decoration: none;
		    font-size: 16px;
		    line-height: 16px;
		    padding: 15px 30px;
		    cursor: pointer;
		}
		.sub0{
			position: relative;
			
		}
		.sub1 ul{
			left: -17px;
		}
		.subnav{
	        display: none;
	        margin-right: 0;
	        position: absolute;
	        left:-32px;
	        /* top: 22px; */
	        background-color: #FFFFFF;
	        /* margin-top: 30px; */
	         z-index: 1001;
	         text-align: center;
	         border-radius: 10px;
		}
		.navigation li:hover .subnav{
			display: block; 
			background-size: cover;
			
		}
		.subnav li:hover{
			background-color: gainsboro;
		}
		.sticker{
			position: absolute;
		    top:-40px;
		    left: 440px;
		    width: 106px;
		    height: 54px;
		    background-image: url(img/fdd68af0-4038-4fff-bf73-3f00ea2ada4b.png);
		    background-size: cover;
		    background-repeat: no-repeat;
		    font-size: 20px;
		    line-height: 44px;
		    text-align: center;
		    color: #fff;
			transform: scale(.5);
			/*缩小*/
		}
		.main{
            top: 50%;
            left: 50%;
            transform: translate(-60%,-60%);
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            position: absolute;
			z-index: -1;
		}
		.mp4{
			margin: 11px 12px;
			position: absolute;
		}
		.iphone{
			position: relative;
			width: 180px;
			height: 360px;
			margin-right:60px;
			/* transform: scale(0.6); */
		}
		.box1{
			position: absolute;
			width: 180px;
			height: 360px;
			background-image:url(img/3ca6607e-d4a5-4cb9-b455-a746713d8283.png);
			background-size: 180px 360px;
		}
		.box2{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
		}
		h2{
			color: white;
			font-size: 48px;
			margin-top: 13px;
		}
		.qrcodes{
			margin-top: 36px;
			width: 330px;
			height: 40px;
		}
		.ios{
		    display: flex;
		    flex-direction: row;
		    justify-content: center;
		    align-items: center;
			width: 150px;
			height: 40px;
			margin-right: 15px;
			border-radius: 20px;
		    background-color: #fff;
		    /* cursor: pointer; */
		    position: relative;
		}
		.iossub{
			display: none;
			content: "";
			position: absolute;
			top: 40px;
			/* left: 8px; */
			left: 0;
			width: 100%;
			height: 142px;
		    /*border-radius: 12px 12px 12px 12px; */
            border-radius: 0 0 20px 20px;
			background-color: #fff;
			background-image: url(img/0b84da4e-3984-4603-a2f2-72a806e5494d.png);
			background-repeat: no-repeat;
			background-size: 134px 134px;
			background-position:8px 0;
		}
		.ios:hover{
			border-radius: 20px 20px 0 0;
		}
		.ios:hover .iossub{
			display:block;
		} 
		.ios-icon{
			display: inline-block;
			width: 24px;
			height: 24px;
			margin-right: 6px;
		}
		.android{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 150px;
			height: 40px;
			background-color: #fff;
			border-radius: 20px;
			/* cursor: pointer; */
			position: relative;
		}
		.androidsub{
            display: none;
			content: "";
			position: absolute;
			top: 40px;
			/* left: 8px; */
			left: 0;
			width: 100%;
			height: 142px;
		    /*border-radius: 12px 12px 12px 12px; */
            border-radius: 0 0 20px 20px;
			background-image: url(img/8aa9236a-43ef-44f0-97d3-3167847de82a.png);
			background-repeat: no-repeat;
			background-size:134px 134px;
			background-position:8px 0;
			background-color: #fff;
			
		}
		.android:hover{
			border-radius: 20px 20px 0 0;
		}
		.android:hover .androidsub{
			display: block;
		} 
		.android-icon{
			display: inline-block;
		    width: 24px;
		    height: 24px;
		    margin-right: 6px;
		}
		footer{
			position:fixed;
			width:1080px;
			height: 108px;
			padding: 50px 0 30px 0;
			font-size: 14px;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			/*定义转换 针对x轴的值*/
		}
		footer li{
			display: inline-block;
		}
		.top{
			font-size: 14px;
            font-weight: 500;
            text-align: center;
		}
		/*盒子居中*/
		.topbar{
		    width: 100%;
		    display: flex;
		    flex-direction: row;
		    justify-content: center;
		    align-items: center;
		    margin: 0 0 20px
		}
		.topul{
			width: 1080px;
			margin: 0;
			padding: 0 80px 0 60px;
			list-style-type: none;
			display: flex;
			/*弹性盒子*/
			flex-direction: row;
			/*左对齐*/
			justify-content: space-between;
			/*均匀分布*/
			align-items: center;
			/*纵轴均匀*/
			/* position: relative; */
			text-align: center;
		}
		.top a{
			display: block;
			color: white;
		}
		.bottom{
			width: 100%;
		    height: 70px;
			text-align: center;
		}
		.police{
			background: url(img/b0b2023e-bf3c-4994-9b67-cb8758739684.png) no-repeat;
			background-position:230px 0;
			background-size:20px 17px;
		}
		.rank{
			background: url(img/ef91e682-58ee-4fb8-a01d-2addee4c5af4.png) no-repeat;
			background-size: 20px 17px;
			background-position: 0 0;
		}
		p a{
			color: black;
		}
	</style>
	</head>
	<body>
		<header>
			<div class="logo fl">
				<img src="img/5c6dec9a-8e4b-41f0-960b-0ae9493ea700.png" alt="">
			</div>
			<div class="navigation fr">
				<ul>
					<li class="fl current c1"><a href="">首页</a></li>
					<li class="fl"><a href="">社区精选</a></li>
					<li class="fl sub0">
						<a class="sublook" href="">业务合作<img src="img/37dd6c5e-6cf8-4754-88d3-56b8a701c69a.png" alt="" class="arrow"></a>
						<ul class="subnav">
							<li><a href="">企业号</a></li>
							<li><a href="">推广合作</a></li>
							<li><a href="">品牌合作人</a></li>
							<li><a href="">商家入驻</a></li>
						</ul>
					</li>
					<li class="fl sub0 sub1">
						<a class="sublook" href="">发布者工具<img src="img/37dd6c5e-6cf8-4754-88d3-56b8a701c69a.png" alt="" class="arrow"></a>
						<div class="sticker">视频上传</div>
						<ul class="subnav">
							<li><a href="">视频上传</a></li>
							<li><a href="">电脑直播</a></li>
						</ul>
					</li>
					<li class="fl"><a href="">新闻中心</a></li>
					<li class="fl"><a href="">关于我们</a></li>
					<li class="fl"><a href="">社会责任</a></li>
					<li class="fl"><a href="">加入我们</a></li>
					<li class="fl sub0">
						<a class="sublook" href="">中文<img src="img/37dd6c5e-6cf8-4754-88d3-56b8a701c69a.png" alt="" class="arrow"></a>
						<ul class="subnav">
							<li><a href="">English(US)</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</header>
		<div class="main">
			<div class="iphone fl ">
				<div><video width="158" height="336" controls loop autoplay class="mp4" alt="加载失败">
					<source src="img/new5.27.mp4" type="video/mp4"></source>
					<object width="" height="" type="application/x-shockwave-flash" data="">
						<param name="autoplay" value="true" />
						<!-- <param name="flashvars" value="autostart=true&amp;file=myvideo.swf" /> -->
					</object>
				</div>
				<div class="box1"></div>
			</div>
			<div class="box2 fl">
				<div >
					<img src="img/83074709-0d05-4d1c-9d38-24a8e910d914.png" alt="" width="143" height="50">
					<h2>标记我的生活</h2>
				</div>
			    <div class=" qrcodes fl">
			    	<div class="ios clearfix fl">
						<!-- <div class="ios-icon" > -->
							<span class="fa fa-apple" style="font-size: 24px"></span>
			    	    	<p>iOS版</p>
							<div class="iossub"></div>
						<!-- </div> -->
			    	</div>
			    	<div class="android clearfix fl">
						<!-- <div calss="android-icon" > -->
							<span class="fa fa-android" style="font-size: 24px"></span>
			    		    <p>Android版</p>
							<div class="androidsub"></div>
						<!-- </div> -->
				    </div>
				</div>
			</div>
		</div>
		<footer class="w clearfix">
			<div class="top">
				<div class="topbar">
					<ul class="topul">
				    	<li><a href="">用户协议</a></li>
				    	<li><a href="">隐私政策</a></li>
				    	<li><a href="">侵权投诉指引</a></li>
				    	<li><a href="">社区规范</a></li>
				    </ul>
				</div>	
			</div>
			<div class="bottom">
				<p>
					<span><a href="">沪ICP备13030189号Copyright 0 2014-2020行吟信息科技(上海)有限公司</a></span>
					地址:上海市黄浦区马当路388号C座| 电话: 021-642245301 
					<span><a href="">自营经营者信息</a></span>| 
					<span class="police"><a href="">2020沪公网安备31010102002533号&nbsp &nbsp &nbsp</a></span>
				</p>
                <p>
					<span><a href="">网络文化经营许可证:沪网文[2018]4086 -308号</a></span>
					<span><a href="">增值电信业务经营许可证:沪B2 -20150021</a></span>|
					<span class="rank"><a href="">&nbsp &nbsp &nbsp 网购(订餐)大家评</a></span>
				</p>
				<p>
					<span><a href="">医疗器械经营许可证:沪嘉食药监械经营许20187006号</a></span>
				    <span><a href="">医疗器械网络交易服务第三方平台备案: (沪)网械平台备字[2019]第00006号</a></span>|
					<span><a href="">互联网药品信息服务资格证书: (沪)-经营性-2018-0011</a></span>
				</p>
                <p>
					<span><a href="">违法不良信息举报电话: (027) 5931 3970</a></span>
				    <span><a href="">上海市互联网举报中心网上有害信息举报专区</a></span>
				</p>
			</div>
		</footer>
	</body>
</html>
